<template>
  <div class="home">
    <header class="sgh-header">
      <Button
        :context="isStatistics ? '收起' : '统计'"
        v-show="isFullScreen"
        @onClick="setStatistics"
      />
      <Button context="新增" @onClick="setFormShow(true)" />
      <Button
        icon='<svg t="1607997946641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3248"><path d="M881 512c0-52.4 32.9-96.8 79-114.5-11-43.2-28-83.9-50.2-121.3C864.6 296.3 810 288.1 773 251c-37-37-45.2-91.7-25.1-136.8C710.4 92 669.7 75 626.5 64c-17.8 46.1-62.2 79-114.5 79-52.4 0-96.8-32.9-114.5-79-43.2 11-83.9 28-121.3 50.2 20.1 45.2 11.9 99.8-25.1 136.8-37 37-91.7 45.2-136.8 25.2C92 313.6 75 354.3 64 397.5c46.1 17.8 79 62.2 79 114.5 0 52.4-32.9 96.8-79 114.5 11 43.2 28 83.9 50.2 121.3C159.4 727.7 214 735.9 251 773c37 37 45.2 91.7 25.1 136.8C313.6 932 354.3 949 397.5 960c17.8-46.1 62.2-79 114.5-79 52.4 0 96.8 32.9 114.5 79 43.2-11 83.9-28 121.3-50.2-20.1-45.2-11.9-99.8 25.1-136.8 37-37 91.7-45.2 136.8-25.2C932 710.4 949 669.7 960 626.5c-46.1-17.7-79-62.1-79-114.5zM512 635c-67.9 0-123-55.1-123-123s55.1-123 123-123 123 55.1 123 123-55.1 123-123 123z" p-id="3249"></path></svg>'
        son="true"
        @onClick="setSettingShow"
      />
      <div class="set-up-son" v-if="isSettingShow">
        <ul>
          <li :class="{ activeLi: !isTableShow }" @click="setFullScreen(false)">
            左右布局
          </li>
          <li :class="{ activeLi: isTableShow }" @click="setFullScreen(true)">
            全屏布局
          </li>
        </ul>
      </div>
    </header>
    <main class="sgh-main">
      <section
        :class="{
          left: true,
          full: isFullScreen,
          hide: isStatistics
        }"
      >
        <Left :edit="edit" ref="LC" @update="update" />
      </section>
      <section
        :class="{
          right: true,
          full: isStatistics,
          hide: !((isFullScreen && isStatistics) || !isFullScreen)
        }"
      >
        <Right ref="RC" />
      </section>
      <section
        :class="{
          fixedForm: true,
          show: isFormShow,
          fixedFullShow: isFullScreen && isFormShow,
        }"
      >
        <Form @close="close" :editVal="editVal" @update="update" />
      </section>
    </main>
  </div>
</template>

<script>
import Button from "@/components/Button/index.vue";
import Left from "@/components/Left/index.vue";
import Right from "@/components/Right/index.vue";
import Form from "@/components/Form/index.vue";
import { getUser } from "@/service/home.js";

export default {
  name: "Home",
  components: {
    Button,
    Left,
    Right,
    Form,
  },
  data() {
    return {
      isFullScreen: false,
      isSettingShow: false,
      isStatistics: false,
      isFormShow: false,
      isTableShow: false,
      editVal: {},
    };
  },
  methods: {
    setFullScreen(flag) {
      this.isFullScreen = flag;
      this.isTableShow = flag;
      this.isFormShow = false;
      this.isSettingShow = false;
      this.resize();
      this.update();
    },
    setSettingShow() {
      this.isSettingShow = !this.isSettingShow;
    },
    setStatistics() {
      this.isStatistics = !this.isStatistics;
    },
    setFormShow(flag) {
      if (this.isFormShow && flag) {
        this.close();
        setTimeout(() => {
          this.isFormShow = true;
          if (JSON.stringify(this.editVal) == "{}") {
            this.$refs.LC.setFlagID(-1);
          }
        }, 500);
      } else {
        this.isFormShow = flag;
      }
    },
    resize() {
      let clientWidth = document.documentElement.clientWidth;
      if (clientWidth < 768) {
        this.isFullScreen = true;
      } else if (!this.isTableShow) {
        this.isFullScreen = false;
      }
    },
    close() {
      this.isFormShow = false;
      this.editVal = {};
    },
    update() {
      this.isFormShow = false;
      if (this.$refs.RC) {
        this.$refs.RC.drawCharts();
      }
      if (this.$refs.LC) {
        this.$refs.LC.getData(this.isTableShow);
      }
    },
    async edit(id) {
      this.setFormShow(true);
      this.editVal = await getUser.bind(this)(id);
    },
  },
  created() {
    this.resize();
    window.addEventListener("resize", this.resize, false);
  },
  watch: {
    isStatistics(val){
      if(val){
        setTimeout(() => {
          this.$refs.RC.drawCharts();
        }, 500);
      }
    },
    isFullScreen(val){
      if(!val){
        setTimeout(() => {
          this.$refs.RC.drawCharts();
        }, 500);
      }
    }
  }
};
</script>

<style lang="scss">
.home {
  padding: 10px;
  .sgh-header {
    display: flex;
    justify-content: flex-end;
    position: relative;
    .set-up-son {
      position: absolute;
      top: 120%;
      right: 0;
      z-index: 99;
      $btn-font-color: #aab8c5;
      $btn-bg-color: #37404a;
      $btn-hover-color: #48aa4e;
      ul {
        list-style: none;
        min-width: 100px;
        padding: 5px 0;
        margin: 0;
        border-radius: 4px;
        box-shadow: 0 0 3px 0 #000;
        background-color: $btn-bg-color;
        color: $btn-font-color;
        font-size: 12px;
        text-align: center;
        cursor: default;
        li {
          padding: 5px 0;
          cursor: pointer;
          &:hover {
            background-color: rgba(#fff, 0.2);
          }
        }
        .activeLi {
          background-color: rgba($btn-hover-color, 0.2);
          color: $btn-hover-color;
        }
      }
    }
  }

  .sgh-main {
    $part-bg-color: #2d3838;
    padding: 15px 0;  
    transform: scale3d(1,1,1);    // 控制 position: fixed; 宽度跟随直接父级，降级成 position: absolute;
    .left,
    .right,
    .fixedForm {
      height: 90vh;
      border-radius: 2px;
      background-color: $part-bg-color;
      transition: width 0.5s, opacity 0.3s;
    }
    .left {
      width: 34%;
      float: left;
      box-shadow: 3px 0 4px 0 rgba(#000, 0.3);
      overflow: hidden;
    }
    .right {
      width: 65%;
      float: right;
      box-shadow: -3px 0 4px 0 rgba(#000, 0.3);
    }
    .fixedForm {
      width: 65%;
      position: fixed;
      right: -100%;
      transition: right 1s, width 0.5s;
    }
    .show {
      right: 0;
    }
    .full {
      width: 100%;
    }
    .hide {
      width: 0;
      opacity: 0;
    }
    .fixedFullShow {
      width: 100%;
    }
  }
}
</style>
